<%--
  Created by IntelliJ IDEA.
  User: Eoly
  Date: 2016/12/8
  Time: 21:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!docType html>
<html>
<head>
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0 user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>这是一个列表的例子</title>
  <style>
    *{padding:0;margin: 0;border: 0;}
    body,html{width: 100%;height: 100%;font-size: 12px;font-family: "微软雅黑","Arial","Microsoft YaHei","黑体",sans-serif; }
    li.in_list{list-style: none;display: block}
    li.in_list a{text-decoration: none;color: black}
    body>div{width: 100%;background-color: #ccc}
    .fl{float: left;}.fr{float: right;}
    /*li.in_list span{display: block;}*/
    li.in_list .tip{padding: 0 2em;width: 100%;overflow: hidden;line-height: 30px;background-color: rgba(255, 255, 255, 0.69);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;  }
    li.in_list .redBig{color: red;font-size: 16px;}
    li.in_list .little{text-decoration:line-through;}
    li.in_list .num{color: red;font-size: 16px;}
    /*li.in_list .title*/
    li.in_list .cen{position: absolute;bottom: 0;width: 100%}
    li.in_list{margin-bottom: 10px;
      -webkit-box-shadow: 0 5px 5px -5px black;
      -moz-box-shadow: 0 5px 5px -5px black;
      box-shadow: 0 5px 5px -5px black;}

    li.in_list .title{padding: 0 2em;width: 100%;height: 60px;line-height: 30px;background-color: #fcfcfc;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;}
    li.in_list .bg{position: relative;width: 100%;height: 200px;background: url("resources/images/s1.png") no-repeat 50%;background-size: 100%}

  </style>
</head>
<body>
<div class="outer">
  <ul>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
    <li class="in_list">
      <div class="bg">
        <div class="cen">
          <div class="tip">
          <span class="fl">
            <span class="redBig">￥58.9</span>
            <span class="little">￥108.5</span>
          </span>
          <span class="fr">
            拼团目标人数：
            <span class="num">15</span>
          </span>
          </div>
          <div class="title">
            大泽山一号泽玉泽香白玫瑰香绿葡萄水晶葡萄新鲜水果四斤顺丰包邮
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
</body>
</html>
